var existData = props.quotes.find((obj) => obj.id === params.id); find is undefined

Fetching data from firebase, displaying data in quote list, and single quote page,

using props,

Using react-dom

const AllQuotes = (props) => {
  const [movies, setMovies] = useState([]);

  async function movieData() {
    try {
      const response = await fetch(
        "https://react-post-api-default-rtdb.firebaseio.com/NewQuotes.json"
      );
      const data = await response.json();
      const loadedData = [];
      for (const key in data) {
        loadedData.push({
          id: key,
          // id : Math.random(0,1).toString(),
          author: data[key].author,
          quote: data[key].quote,
        });
      }
      setMovies(loadedData);
    } catch (error) {}
  }

  useEffect(() => {
    movieData();
  }, []);

  return (
    <React.Fragment>
    <div>
      <h1>All Quotes</h1>
      {/* <button onClick={movieData}>fetch data</button> */}
      <QuoteList quotes={movies} />
    </div>

      <QuotesDetail quotes={movies} />

    </React.Fragment>
  );
};

Single quote display page

const QuotesDetail = (props) => {
  const params = useParams();
  const match = useRouteMatch();

  // console.log(match)

  // console.log(params.id)

  var existData = props.quotes.find((obj) => obj.id === params.id);```




Getting error find is undefined.